<!--
 * @Author: White
 * @description: 心愿墙栏目
 * @LastEditTime: 2021-08-17 22:39:45
-->

<template>
  <div id="leave">
    <div class="title">
      <h1>心愿墙 ({{ result }}条)</h1>
    </div>
    <div
      class="strong"
      :style="{
        backgroundImage: 'url(' + bgimg + ')',
        backgroundSize: 'cover'
      }">
      <div class="strong-bg">
        <div
          class="strong-wrap"
          v-for="(item, index) in message"
          :key="index">
          <div class="strong-date">{{ timeFormat(item.createdAt) }}</div>
          <div class="strong-index">
            这是第{{ item.attributes.order + 1 }}条留言
          </div>
          <el-popover
            placement="bottom"
            :title="timeFormat(item.createdAt)"
            width="30%"
            trigger="hover"
            :content="item.attributes.content">
            <template #reference>
              <div class="strong-content">{{ item.attributes.content }}</div>
            </template>
          </el-popover>
          <div class="strong-email">{{ item.attributes.email }}</div>
          <div class="strong-name">{{ item.attributes.name }}</div>
        </div>
      </div>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10]"
        layout="total, sizes, prev, pager, next"
        :total="result">
      </el-pagination>
    </div>
    <div class="tools">
      <div>
        <span>*</span>昵称:
        <el-input v-model="form.name" placeholder="请输入名字"></el-input>
      </div>
      <div>
        <span>*</span>心愿内容:
        <el-input
          v-model="form.content"
          placeholder="请输入内容">
        </el-input>
      </div>
      <div>
        <span>*</span>联系方式:
        <el-input
          v-model="form.email"
          placeholder="请输入微信或邮箱"
        ></el-input>
      </div>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { onMounted, defineComponent, reactive, toRefs } from 'vue'
import AV from '@/api/cloud'
import { GetBg } from '@/api/biying'
export default defineComponent({
  // setup只在初始化时执行一次，所有的Composition API函数都在此使用。
  setup () {
    const data = reactive({
      result: Number,
      message: [],
      form: {
        name: '',
        content: '',
        email: ''
      },
      bgimg: '',
      currentPage: 1
    })
    onMounted(() => {
      getData()
      getBg()
    })
    const timeFormat = value => {
      const dt = new Date(value)
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
    // 壁纸
    const getBg = async () => {
      const res = await GetBg()
      if (res.status === 200 || res.status === 1) {
        data.bgimg = res.data.bing.url
      } else {
        alert(res.status)
      }
    }
    // 取
    const get = new AV.Query('leave')
    const getData = () => {
      get.find().then(res => {
        res.map((item, index) => {
          item.attributes.order = index
        })
        data.message = res.slice(
          (data.currentPage - 1) * 10,
          data.currentPage * 10
        )
        data.result = res.length
      })
    }
    // 存
    const save = new AV.Object('leave')
    const submit = () => {
      if (!data.form.name) {
        alert('请输入姓名')
      } else if (!data.form.content) {
        alert('请输入内容')
      } else if (!data.form.email) {
        alert('请输入联系方式')
      } else {
        save.save(data.form)
        getData()
        data.form = { name: '', content: '', email: '' }
      }
    }
    const handleCurrentChange = val => {
      data.currentPage = val
      getData()
    }
    const handleSizeChange = val => {
      data.currentPage = val
    }
    return {
      ...toRefs(data),
      getData,
      submit,
      timeFormat,
      handleCurrentChange,
      handleSizeChange
    }
  }
})
</script>

<style lang="scss" scoped>
@media only screen and (min-width: 1200px) {
  #leave {
    padding: 20px 20px 0px 20px;
    box-sizing: border-box;
    height: calc(100vh - 77px);
    .title {
      text-align: center;
      h1 {
        font-size: 20px;
        line-height: 40px;
        cursor: pointer;
        background: linear-gradient(270deg, #00afff, #16dbee 30%, #0006ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
      }
    }
    .strong {
      max-width: 1200px;
      height: 67vh;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: contain;
      overflow: hidden;
      .strong-bg {
        height: 70vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 20px;
        box-sizing: border-box;
        .strong-wrap {
          width: 17%;
          height: 46%;
          padding: 15px;
          font-size: 4px;
          margin-bottom: 30px;
          box-sizing: border-box;
          border-radius: 16px;
          background: #ffffff;
          box-shadow: inset -9px -9px 8px #b5b5b5, inset 9px 9px 8px #ffffff;
          .strong-date {
            font-size: 2px;
          }
          .strong-index {
            font-size: 4px;
            line-height: 20px;
            font-weight: 900;
          }
          .strong-date {
            text-align: center;
          }
          .strong-index {
            line-height: 30px;
            text-align: center;
          }
          .strong-name {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .strong-content {
            width: 100%;
            height: 128px;
            text-indent: 26px;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 7;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
          .strong-email {
            text-align: right;
            -webkit-line-clamp: 1;
          }
          .strong-name {
            text-align: right;
            -webkit-line-clamp: 1;
          }
        }
      }
    }
    .page {
      text-align: center;
      margin-top: 10px;
      height: 6.8vh;
    }
    .tools {
      width: 100%;
      height: 7vh;
      text-align: center;
      div {
        width: 25%;
        color: #000;
        display: inline-block;
        span {
          color: red;
        }
        .el-input {
          width: 70% !important;
        }
        input {
          width: 25%;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media only screen and (max-width: 1200px) {
  #leave {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    .title {
      text-align: center;
      h1 {
        font-size: 20px;
        line-height: 40px;
        cursor: pointer;
        background: linear-gradient(270deg, #00afff, #16dbee 30%, #0006ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
      }
    }
    .strong {
      width: 100%;
      background-repeat: no-repeat;
      background-size: contain;
      overflow: hidden;
      .strong-bg {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 20px;
        box-sizing: border-box;
        .strong-wrap {
          width: 100%;
          height: 100px;
          padding: 15px;
          font-size: 4px;
          margin-bottom: 30px;
          box-sizing: border-box;
          border-radius: 16px;
          background: #ffffff;
          box-shadow: inset -9px -9px 8px #b5b5b5, inset 9px 9px 8px #ffffff;
          .strong-date {
            font-size: 2px;
          }
          .strong-index {
            font-size: 4px;
            line-height: 20px;
            font-weight: 900;
            display: none;
          }
          .strong-date {
            text-align: center;
          }
          .strong-index {
            line-height: 30px;
            text-align: center;
          }
          .strong-name {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .strong-content {
            width: 100%;
            height: 34px;
            text-indent: 26px;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
          .strong-email {
            text-align: right;
            -webkit-line-clamp: 1;
          }
          .strong-name {
            text-align: right;
            -webkit-line-clamp: 1;
          }
        }
      }
    }
    .page {
      text-align: center;
      margin-top: 10px;
      height: 6vh;
    }
    .tools {
      width: 100%;
      text-align: center;
      div {
        width: 100%;
        color: #000;
        display: inline-block;
        padding-bottom: 10px;
        span {
          color: red;
        }
        .el-input {
          width: 70% !important;
          input {
            width: 100%;
          }
        }
        input {
          width: 25%;
        }
      }
    }
  }
}
</style>
